<template>
	<div class="box">
		<head-page
			:title="`${this.$route.query.num}.${this.$route.query.title}`"
			backUrl="/my"
			
		>
		</head-page>
		<div class="tu" v-if="list.minePic && list.minePic.length">
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item
					v-for="(item, index) in list.minePic"
					:key="index"
				>
					<img :src="getImgUrl(item)" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="bottom">
			<div class="center">
				<h3>{{ list.mineTitle }}</h3>
				<p class="richText" v-html="list.mineText"></p>
			</div>
		</div>
	</div>
</template>
  
  <script>
import { getMineDetail } from "@/api/index"

export default {
	data() {
		return {
			list: "",
		}
	},
	methods: {
		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
	},
	mounted() {
		//点击标题查看详情
		getMineDetail({
			mineTitle: this.$route.query.i,
		}).then((res) => {
			if (res.data.code == 200) {
				this.list = res.data.data
				this.list.minePic = this.splitImg(res.data.data.minePic)
				this.list.mineText = this.dataHTML(res.data.data.mineText)
			}
		})
	},
};
</script>
  
  <style scoped >
.box {
	width: 100%;
	height: 100%;
}
.tu {
	width: 100%;
	height: 2.8rem;
}
.tu img {
	width: 100%;
	height: 2.8rem;
}
/* 头标区域 */
.top h3 img {
	width: 0.24rem;
	margin-right: 0.05rem;
}
/* 底部区域 */
.bottom {
	width: 100%;

	display: flex;
	justify-content: center;
}
/* 版心区域 */
.center {
	width: 98%;
	margin-top: 0.05rem;
}
h3 {
	height: 0.3rem;
	line-height: 0.3rem;
	font-size: 0.2rem;
}
p {
	font-weight: 700;
	margin-top: 0.05rem;
	padding: 5px 0;
}
</style>